<template>
	<view class="cart">
		<view class="cartList">
			<view class="cartItem" v-for="(item,index) in cartList" :key="item.id" v-if="cartList">
				<!--选中/不选中-->
				<text class="iconfont icon-xuanzhong" :class="{selected:item.isSelected}" @click="changeSelected(!item.isSelected,index)"></text>
				
				<!--商品信息-->
				<view class="goodsItem">
					<image :src="item.listPicUrl" mode=""></image>
					<view class="goodsInfo">
						<view class="name">
							{{item.name}}
						</view>
						<view class="price">
							￥{{item.retailPrice}}
						</view>
					</view>
				</view>
				
				<!--数量控制-->
				<view class="countCtrl">
					<text class="sub" @click="changeCount(false,index)">-</text>
					<text class="count">{{item.count}}</text>
					<text class="add" @click="changeCount(true,index)">+</text>
				</view>
			</view>
			
			<!--底部-->
			<view class="footer">
				<view class="left">
					<text class="iconfont icon-xuanzhong" :class="{isAllSelected}" @click="changeAllSelected(!isAllSelected)"></text>
					<text>已选 {{totalCount}}</text>
				</view>
				<view class="right">
					<view class="btn">合计￥{{totalPrice}}</view>
					<view class="btn order" @click="buy(totalPrice)">下单</view>
				</view>
			</view>
				
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex';
	import request from '../../utils/request.js';
	import Vue from 'vue';
	
	export default {
		data() {
			return {
				userInfo:{},
				allUserInfo:[]
			};
		},
		mounted(){
			this.getAllUserInfo();
			wx.getStorage({
				key:'userInfo',
				success:(res)=>{
					this.userInfo=JSON.parse(res.data);
				}
			})
		},
		computed:{
			...mapState({
				cartList:state=>state.cart.cartList
			}),
			...mapGetters('cart',['isAllSelected','totalCount','totalPrice'])
		},
		methods:{
			async getAllUserInfo(){
				const res=await request('/getUserInfo');
				this.allUserInfo=res.userInfo;
			},
			
			...mapMutations('cart',['changeCountMutation','changeSelectedMutation','changeAllSelectMutation','buyMutation']),
			
			changeCount(isAdd,index){
				this.changeCountMutation({isAdd,index})
			},
			
			changeSelected(isSelected,index){
				this.changeSelectedMutation({isSelected,index})
			},
			
			changeAllSelected(isAllSelected){
				this.changeAllSelectMutation(isAllSelected)
			},
			
			buy(totalPrice){
				if(this.userInfo.nickName){
					var that=this;
					if(this.userInfo.balance>=totalPrice){
						wx.showModal({
							title:'提示',
							content:'您确定下单商品吗？',
							success(res){
								if(res.confirm){
									that.haveToDo(totalPrice);
									wx.showModal({
										title:'提示',
										content:'下单成功',
										success(res){
											if(res.confirm){
												//移除购物车内已下单商品
												that.buyMutation();
												that.refresh();
												wx.reLaunch({
													url:'/pages/cart/cart'
												})
											}
										}
									})
								}
							}
						})
					}else{
						wx.showModal({
							title:'提示',
							content:'余额不足!',
							success(res){
								if (res.confirm) {
									
								}
							}
						})
					}
				}else{
					wx.showModal({
						title: '提示',
						content: '请登录后再进行操作',
						success(res) {
							if (res.confirm) {
								wx.reLaunch({
									url:'/pages/personal/personal'
								})
							}
						}
					})
				}
			},
			haveToDo(totalPrice){
				console.log(this.userInfo.nickName+'消费'+totalPrice+'元');
				//修改数据库
				var newBalance=this.userInfo.balance-totalPrice;
				request('/buy?account='+newBalance+'&nickName='+this.userInfo.nickName);
				this.getAllUserInfo();
			},
			refresh(){
				//修改Storage
				var that=this;
				var i,index;
				var flag=false;
				for(i=0;i<this.allUserInfo.length;i++){
					if(this.userInfo.nickName===this.allUserInfo[i].nickName){
						flag=true;
						index=i;
						break;
					}
				}
				wx.setStorage({
					key:"userInfo",
					data:JSON.stringify(that.allUserInfo[index])
				})
			 }
		}
	}
</script>

<style lang="stylus">
	.cart
		background-color: #f5f5f5
		.cartList
			.cartItem
				position: relative
				height: 172rpx
				width: 100%
				margin: 20rpx
				background-color: #fff
				padding: 20rpx
				display: flex
				.iconfont
					font-size: 40rpx
					line-height: 172rpx
					&.selected
						color: #dd1a21
				.goodsItem
					display: flex
					image
						width: 172rpx
						height: 172rpx
						margin: 0 40rpx
					.goodsInfo
						.name
							font-size: 26rpx
							margin: 10rpx
						.price
							color: #BB2C08
				.countCtrl
					position: absolute
					right: 80rpx
					bottom: 30rpx
					text
						border: 1px solid #ddd
						padding: 8rpx 28rpx
						&:nth-child(2)
							border: none
							border-top: 1px solid #ddd
							border-bottom: 1px solid #ddd 
			.footer
				position fixed
				bottom 0
				left 0
				right 0
				height 100rpx
				line-height 100rpx
				background #fff
				display flex
				justify-content space-between
				border-top: 1rpx solid #ccc
				.iconfont
					margin: 0 20rpx
				.right
					display: flex
					.btn
						flex: 1
						width: 230rpx
						display: inline-block
						&.order
							background: #dd1a21
							text-align: center
							color: #fff
</style>
